<template>
	<view>
		<view class="private_sc">
			<navigator hover-class="false" class="sc" url="/pages/private-school/index">私塾</navigator>
			<view class="sc selected_color">亲子互</view>
		</view>
		<view class="nav">
			<view class="navItem" :class="navIndex == index ? 'navActive' : ''" v-for="(item, index) in navList" :key="index"
			 @tap="navClick(index)">{{ item }}</view>
		</view>
		<view v-if="navIndex == 0">
			<view class="tip">
				<view class="tipItem" :class="tipIndex == index ? 'tipActive' : ''" v-for="(item, index) in tipList" :key="index"
				 @tap="tipClick(index)">{{ item }}</view>
			</view>
			<view class="cont">
				<view class="title">愿望清单</view>
				<view class="list">
					<view class="listNone" v-if="list.length == 0">愿望清单为空哦~</view>

					<view class="listswipe" v-else v-for="(item, index) in list" :key="index">
						<uni-swipe-action>
							<uni-swipe-action-item :options="options" @click="bindClick(index, item.wish_id)" :disabled="item.users_type == 3 ? false : true">
								<view class="listItem">
									<view class="list-info">
										<view class="list-title">{{ item.title }}</view>
										<view class="list-time">{{ item.time }}</view>
									</view>
									<view class="list-cont">{{ item.content }}</view>
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>
				<uni-load-more v-if="list.length > 5" :status="status" :content-text="contentText" />
			</view>
			<view class="bottomAdd">
				<view @click="addWish">许个愿望</view>
			</view>
		</view>
		<view v-if="navIndex == 1">
			<view class="tip tips">
				<view class="tipItem" :class="tipsIndex == item.tipstype ? 'tipActive' : ''" v-for="(item, index) in tips" :key="index"
				 @tap="tipsClick(item.tipstype)">
					{{ item.name }}
				</view>
			</view>
			<list :list="artList" :status="status" :contentText="contentText" stateType="1" addType="3"></list>
			<view class="bottomAdd">
				<view @tap="addArticle">添加</view>
			</view>
		</view>
		<view v-if="navIndex == 2">
			<view class="newsView">
				<view class="empty" v-if="news.length == 0">
					<i class="iconfont iconzanwuwenda"></i>
					<view class="empty_text">暂无消息</view>
				</view>
				<view class="newItem" @click="gotoed(index)" v-for="(item, index) in news" :key="index">
					<view class="newItem-left">
						<view>
							<image :src="item.msgPhoto ? item.msgPhoto : defimg"></image>
						</view>
						<view class="newItem-left-info">
							<text>{{ item.msgName ? item.msgName : '未设置昵称' }}</text>
							<view class="news-info">
								{{ item.time }}
								<text v-show="item.msgType == 1">向你发出问答</text>
								<text v-show="item.msgType == 2">回答了你的问题</text>
								<text v-show="item.msgType == 3">回复了你</text>
							</view>
						</view>
					</view>
					<view class="newItem-right"><i class="iconfont iconwenti1"></i></view>
				</view>
				<uni-load-more v-if="news.length > 7" :status="status" :content-text="contentText" />
			</view>
			<!-- 消息 -->
			<view @click="gotofb" class="gotoNews"><i class="iconfont iconwenti1"></i></view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import list from '@/components/artlist/artlist.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	export default {
		components: {
			list,
			uniLoadMore,
			uniSwipeAction
		},
		data() {
			return {
				navList: ['愿望', '家文化'],
				navIndex: 0,
				tipList: ['全部', '我的', '孩子'],
				tipIndex: 0,
				list: [], //愿望列表
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF7171'
					}
				}],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: '没数据'
				},
				news: [], //消息列表
				tips: [{
						name: '全部',
						tipstype: 0
					},
					{
						name: '家规',
						tipstype: 9
					},
					{
						name: '祖训',
						tipstype: 10
					},
					{
						name: '祖传',
						tipstype: 13
					},
					{
						name: '家务',
						tipstype: 11
					},
					{
						name: '兴家',
						tipstype: 12
					}
				],
				tipsIndex: 0,
				artList: [], //文章列表
				defimg: this.defimg
			};
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			if (this.navIndex == 0) {
				this.getList();
			} else if (this.navIndex == 1) {
				this.getArt();
				// } else if (this.navIndex == 2) {
				// 	this.getNews();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				if (_this.navIndex == 0) {
					_this.getList();
				} else if (_this.navIndex == 1) {
					_this.getArt();
					// } else if (_this.navIndex == 2) {
					// 	_this.getNews();
				}
			}, 500);
		},
		// 获取愿望清单列表
		mounted() {
			this.reload = true;
			this.page = 1;
			if (this.navIndex == 0) {
				this.getList();
			} else if (this.navIndex == 1) {
				this.getArt();
				// } else if (this.navIndex == 2) {
				// 	this.getNews();
			}
		},
		methods: {
			/* 获取愿望列表 */
			getList() {
				var data = {
					type: Number(this.tipIndex + 1),
					page: this.page,
					pagesize: 6
				};
				if (data.type != 2) {
					data.child_user_id = uni.getStorageSync('currentChild').student_id;
				}
				this.$zapi.apiPost('user/newarticle.Wishlist/lists', data).then(res => {
					if (res.data.code == 200 && res.data.data.data) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getLeftTime(list[i].creat_time);
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
				});
			},
			/* 获取消息 */
			getNews() {
				var data = {
					userId: uni.getStorageSync('student_info').id,
					page: this.page,
					pageSize: 8,
					userType: 1,
					stuId: uni.getStorageSync('currentChild').student_id
				};
				this.$qapi.apiPost('interaction/selMsg', data).then(res => {
					if (res.data.code == 200 && res.data.data.obj) {
						var result = res.data.data.obj;
						for (var i = 0; i < result.length; i++) {
							result[i].time = result[i].msgTime.substring(0, 16);
						}
						this.news = this.reload ? result : this.news.concat(result);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.news = [];
							this.status = 'noMore';
						} else {
							this.status = 'noMore';
						}
					}
					this.$forceUpdate();
				});
			},
			/* 获取文章列表 */
			getArt() {
				var data = {
					page: this.page,
					pagesize: 7,
					article_type: 4,
					article_label_type: this.tipsIndex
				};
				this.$zapi.apiPost('user/newarticle.Lists/articleList', data).then(res => {
					if (res.data.code == 200 && res.data.data.data.length > 0) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].creat_time);
							list[i].typeName = util.getArtType(list[i].article_label_type);
						}
						this.artList = this.reload ? list : this.artList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.artList = [];
						} else {
							this.status = 'noMore';
						}
					}
					this.$forceUpdate();
				});
			},
			/* nav切换 */
			navClick(index) {
				this.navIndex = index;
				this.reload = true;
				this.page = 1;
				if (this.navIndex == 0) {
					this.getList();
				} else if (this.navIndex == 1) {
					this.getArt();
					// } else if (this.navIndex == 2) {
					// 	this.getNews();
				}
			},
			/* tip切换 */
			tipClick(index) {
				this.tipIndex = index;
				this.reload = true;
				this.page = 1;
				this.getList();
			},
			/* 点击删除 */
			bindClick(index, id) {
				var _this = this;
				uni.showModal({
					content: '删除后将无法恢复，确定要删除吗？',
					confirmColor: '#FF9900',
					success: function(res) {
						if (res.confirm) {
							_this.$zapi.apiPost('user/newarticle.Wishlist/delWish', {
								wish_id: id
							}).then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
								if (res.data.code == 200) {
									_this.reload = true;
									_this.page = 1;
									_this.getList();
								}
							});
						}
					}
				});
			},
			/* 发布问答 */
			gotofb: function() {
				var questionerUser = uni.getStorageSync('currentChild').student_id;
				var questionerName = uni.getStorageSync('currentChild').nicheng;
				uni.navigateTo({
					url: '../quesAndAnswer/essayreply?questionerUser=' + questionerUser + '&questionerName=' + questionerName +
						'&questionerUserType=1'
				});
			},
			/* 查看详情 */
			gotoed(index) {
				uni.navigateTo({
					url: '../quesAndAnswer/essaydetails?questionsId=' + this.news[index].msgId
				});
			},
			/* tips切换 */
			tipsClick(type) {
				this.tipsIndex = type;
				this.reload = true;
				this.page = 1;
				this.getArt();
			},
			/* 添加文章 */
			addArticle() {
				uni.navigateTo({
					url: '/pages/articleModule/article-release?stateType=1&addType=3&article_type=4&article_label_type=' + this.tipsIndex
				});
			},
			addWish() {
				uni.navigateTo({
					url: '/pages/parenting/vow'
				})
			}
		}
	};
</script>

<style lang="scss">
	.private_sc {
		width: 100%;
		height: 88upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background: #FFFFFF;

		.sc {
			line-height: 88upx;
			font-size: 34upx;
			color: #666666;
		}
		.selected_color {
			color: #FF9900 !important;
		}
	}

	/* 顶部选项卡 */
	.nav {
		height: 88upx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.navItem {
		color: #666666;
		font-size: 34upx;
		display: flex;
		justify-content: center;
		line-height: 82upx;
		flex-direction: column;
		align-items: center;
	}

	.navActive {
		color: #ff9900;
	}

	.navActive:after {
		content: '';
		width: 32upx;
		height: 4upx;
		font-weight: bold;
		background: #ff9900;
	}

	/* 标签选项卡 */
	.tip {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 30upx solid #fafafa;
		border-bottom: 30upx solid #fafafa;
		background: #fafafa;
		width: 100%;
	}

	.tips {
		justify-content: space-around;
	}

	.tipItem {
		color: #999999;
		font-size: 30upx;
		padding: 8upx 22upx;
		border: 2upx solid #cccccc;
		line-height: 1;
		text-align: center;
		border-radius: 26upx;
		margin-left: 30upx;
		margin-right: 18upx;
	}

	.tips .tipItem {
		margin: 0;
	}

	.tipActive {
		color: #ffffff;
		background: #ff9900;
		border: 2upx solid #ff9900;
	}

	/* 内容&愿望 */
	.cont {
		width: 100%;
		padding-bottom: 140upx;
	}

	.title {
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		line-height: 1;
		margin: 30upx 0 42upx 48upx;
	}

	.title:before {
		content: '';
		width: 4upx;
		height: 36upx;
		font-weight: bold;
		background: #ff9900;
		position: absolute;
		left: 30upx;
	}

	.listswipe {
		margin-bottom: 20upx;
		border-radius: 12upx;
		overflow: hidden;
	}

	.listNone {
		color: #666666;
		font-size: 34upx;
		margin-top: 200upx;
		text-align: center;
	}

	.list {
		width: 690upx;
		margin: auto;
	}

	.listItem {
		width: 100%;
		box-shadow: 0px 4upx 8upx rgba(0, 0, 0, 0.05);
		border-radius: 8upx;
		min-height: 108upx;
		padding: 12upx 0;
	}

	.list-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-title {
		color: #666666;
		font-size: 32upx;
		margin-left: 30upx;
		max-width: 65%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.list-time {
		color: #999999;
		font-size: 30upx;
		margin-right: 30upx;
	}

	.list-cont {
		color: #999999;
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
		margin: 0 30upx;
		line-height: 1.5;
	}

	/* 内容&智互 */
	.newsView {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.newsView .newItem {
		width: 690upx;
		height: 140upx;
		margin: 20upx 30upx;
		background: #ffffff;
		box-shadow: 0px 2upx 8upx rgba(0, 0, 0, 0.06);
		border-radius: 16upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.newItem-left {
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
	}

	.newItem-left image {
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
		margin: 26upx 16upx 0upx 26upx;
	}

	.newItem-left-info text {
		color: #333333;
		font-size: 34upx;
	}

	.news-info {
		color: #999999;
		font-size: 26upx;
	}

	.news-info text {
		color: #ff9900;
		font-size: 26upx;
	}

	.newItem-right i {
		color: #ff9900;
		font-size: 50upx;
		margin-right: 44upx;
		opacity: 0.7;
	}

	.iconzanwuwenda {
		color: #e5e5e5;
		font-size: 400upx;
		display: flex;
		justify-content: center;
		align-content: center;
	}

	.empty_text {
		font-size: 38upx;
		color: #999999;
		text-align: center;
		margin-top: -200upx;
	}

	.gotoNews {
		position: fixed;
		right: 48upx;
		bottom: 62upx;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background: linear-gradient(323deg, rgba(255, 185, 65, 1) 0%, rgba(255, 153, 0, 1) 100%);
		box-shadow: 0px 4px 14px rgba(255, 153, 0, 0.3);
		text-align: center;
		line-height: 100upx;
	}

	.gotoNews .iconwenti1 {
		color: #ffffff;
		font-size: 60upx;
	}

	/* 内容&家文化 */
	.news .none {
		margin-top: 200upx !important;
	}

	.bottomAdd {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
		background: #ffffff;
	}

	.bottomAdd view {
		background: #ff9900;
		text-align: center;
		color: #ffffff;
		font-size: 34upx;
		margin: 20upx 30upx 0;
		width: 690upx;
		height: 80upx;
		line-height: 80upx;
	}

	/* 底部 */
	/* .bottom {
	position: fixed;
	left: 30upx;
	bottom: 30upx;
	width: 690upx;
	background: #ff9900;
	border-radius: 8upx;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	color: #ffffff;
	z-index: 1;
} */
</style>
